<script setup lang="ts">
import { ref } from 'vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const range = ref(['2024-01-1', '2024-1-5'])
// 获取页面参数
const query = defineProps<{
  type: string
}>()

// 搜索
const form = ref({
  name: '',
  time: '',
})
const onDateChange = (e: any) => {
  console.log(...e)
}
const onSubmit = () => {}
const activePanel = ref([])
const activePanelChildren = ref([])
const busListActive = ref([
  { name: '毛豆豆超市', code: 'LCM1584526', time: '15:30:56' },
  { name: '联众超市', code: 'LCM1584526', time: '15:30:56' },
  { name: '毛豆豆超市', code: 'LCM1584526', time: '15:30:56' },
])

const list = ref([
  {
    id: '1',
    time: '2023年3月',
    total: '2562',
    open: false,
    children: [
      {
        id: '11',
        time: '2023年3月1日',
        total: '62',
        open: false,
        user: [
          { userName: '张三', total: '3' },
          { userName: '李四', total: '2' },
        ],
        bunessList: [
          [
            { name: '毛豆豆超市1', code: 'LCM1584526', time: '15:30:56' },
            { name: '联众超市1', code: 'LCM1584526', time: '15:30:56' },
            { name: '毛豆豆超市1', code: 'LCM1584526', time: '15:30:56' },
          ],
          [
            { name: '毛豆豆超市2', code: 'LCM1584526', time: '15:30:56' },
            { name: '联众超市2', code: 'LCM1584526', time: '15:30:56' },
            { name: '毛豆豆超市2', code: 'LCM1584526', time: '15:30:56' },
          ],
        ],
      },
      {
        id: '12',
        time: '2023年3月2日',
        total: '97',
        open: false,
        user: [
          { userName: '张三', total: '3' },
          { userName: '李四', total: '2' },
        ],
        bunessList: [
          [
            { name: '毛豆豆超市3', code: 'LCM1584526', time: '15:30:56' },
            { name: '联众超市3', code: 'LCM1584526', time: '15:30:56' },
            { name: '毛豆豆超市3', code: 'LCM1584526', time: '15:30:56' },
          ],
          [
            { name: '毛豆豆超市4', code: 'LCM1584526', time: '15:30:56' },
            { name: '联众超市4', code: 'LCM1584526', time: '15:30:56' },
            { name: '毛豆豆超市4', code: 'LCM1584526', time: '15:30:56' },
          ],
        ],
      },
    ],
  },
  {
    id: '2',
    time: '2023年4月',
    total: '698',
    open: false,
    children: [
      {
        id: '21',
        time: '2023年4月1日',
        total: '21',
        open: false,
        user: [
          { userName: '张三', total: '3' },
          { userName: '李四', total: '2' },
        ],
        bunessList: [
          [
            { name: '毛豆豆超市', code: 'LCM1584526', time: '15:30:56' },
            { name: '联众超市', code: 'LCM1584526', time: '15:30:56' },
            { name: '毛豆豆超市', code: 'LCM1584526', time: '15:30:56' },
          ],
          [
            { name: '毛豆豆超市2', code: 'LCM1584526', time: '15:30:56' },
            { name: '联众超市2', code: 'LCM1584526', time: '15:30:56' },
            { name: '毛豆豆超市2', code: 'LCM1584526', time: '15:30:56' },
          ],
        ],
      },
      {
        id: '22',
        time: '2023年4月2日',
        total: '34',
        open: false,
        user: [
          { userName: '张三', total: '3' },
          { userName: '李四', total: '2' },
        ],
        bunessList: [
          [
            { name: '毛豆豆超市', code: 'LCM1584526', time: '15:30:56' },
            { name: '联众超市', code: 'LCM1584526', time: '15:30:56' },
            { name: '毛豆豆超市', code: 'LCM1584526', time: '15:30:56' },
          ],
          [
            { name: '毛豆豆超市2', code: 'LCM1584526', time: '15:30:56' },
            { name: '联众超市2', code: 'LCM1584526', time: '15:30:56' },
            { name: '毛豆豆超市2', code: 'LCM1584526', time: '15:30:56' },
          ],
        ],
      },
    ],
  },
])
const myCollapse = ref()
const handleOpenChange = (index: any) => {
  setTimeout(() => {
    myCollapse.value.children[index].init()
  }, 20)
}

const changeActiveUser = (index: any, index1: any, index2: any) => {
  busListActive.value = list.value[index].children[index1].bunessList[index2]
}
const activeIndex = ref(0)
</script>

<template>
  <view class="viewport">
    <!-- 外销码列表 -->
    <scroll-view scroll-y class="orders">
      <view class="top_total">
        <view class="label"><text>总数:</text>89850</view>
        <view class="label"><text>已售出:</text>89850</view>
        <view class="label"><text>未售出:</text>89850</view>
        <view class="label"><text>作废:</text>89850</view>
      </view>
      <!-- 表单内容 -->
      <view class="form">
        <view class="form-content">
          <view class="form-item">
            <text class="label">承销商名称：</text>
            <input class="input" type="text" placeholder="请填写" v-model="form.name" />
          </view>
          <view class="form-item">
            <text class="label">日期</text>
            <uni-datetime-picker
              v-model="range"
              type="daterange"
              start="2024-1-1"
              end="2026-1-1"
              rangeSeparator="至"
              @change="onDateChange"
            >
              <view v-if="false">2000-01-01</view>
              <view class="placeholder" v-else>请选择日期</view>
            </uni-datetime-picker>
          </view>
          <!-- 提交按钮 -->
          <button class="form-button" @tap="onSubmit">搜索配送信息</button>
        </view>
      </view>
      <view class="list">
        <!-- <view class="title">
          <text>条码列表</text>
        </view> -->
        <uni-collapse class="code_list" ref="myCollapse" v-model="activePanel" accordion>
          <uni-collapse-item
            class="code_item"
            v-for="(item, index) in list"
            :key="item.id"
            titleBorder="none"
            :open="item.open"
            @change="handleOpenChange(index)"
          >
            <template v-slot:title>
              <view class="mouth_item">
                <text>{{ item.time }}</text>
                <text>数量：{{ item.total }}</text>
              </view>
            </template>
            <view class="mouth content">
              <uni-collapse v-model="activePanelChildren" accordion>
                <uni-collapse-item
                  :open="item.open"
                  v-for="(secItem, index1) in item.children"
                  :key="secItem.id"
                  @change="handleOpenChange(index1)"
                >
                  <template v-slot:title>
                    <div class="day_title">
                      <text>{{ secItem.time }}</text>
                      <text>数量：{{ secItem.total }}</text>
                    </div>
                  </template>
                  <view class="day content">
                    <view class="day_item">

                      <view class="people_nav">
                        <view
                          class="people_item active"
                          v-for="(itemUser,index2) in secItem.user"
                          :key="itemUser.userName"
                          @tap="changeActiveUser(index,index1,index2)"
                          >{{itemUser.userName}}/{{itemUser.total}}个</view
                        >
                      </view>
                      <view class="people_content">
                        <view class="content_item content_title">
                          <view class="business_name">承销商</view>
                          <view class="business_code">乐促码</view>
                          <view class="business_time">配送时间</view>
                          <view class="handle"></view>
                        </view>
                        <view class="content_item" v-for="(itemBus,index3) in busListActive" :key="index3">
                          <view class="business_name">{{ itemBus.name }}</view>
                          <view class="business_code">{{ itemBus.code }}</view>
                          <view class="business_time">{{ itemBus.time }}</view>
                          <view class="handle"
                            ><uni-icons type="right" size="20" color="#ddd"></uni-icons
                          ></view>
                        </view>
                      </view>
                    </view>
                  </view>
                </uni-collapse-item>
              </uni-collapse>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </scroll-view>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

// 表单
.form {
  background-color: #f4f4f4;
  margin-bottom: 10px;
  &-content {
    margin: 20rpx 20rpx 0;
    padding: 10px 20rpx 5px;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      width: 180rpx;
      color: #333;
    }

    .account {
      color: #666;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      margin-right: 20rpx;
    }

    .picker {
      flex: 1;
    }
    .placeholder {
      color: #808080;
    }
  }

  &-button {
    height: 70rpx;
    width: 150px;
    text-align: center;
    line-height: 70rpx;
    margin: 30rpx auto;
    color: #fff;
    border-radius: 70rpx;
    font-size: 28rpx;
    background-color: #27ba9b;
  }
}

.top_total {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 10px 20px;
  background-color: #fff;
  font-size: 28rpx;
  .label {
    width: 50%;
    margin: 5px 0;
    text {
      display: inline-block;
      width: 120rpx;
      color: #666;
    }
  }
}

.list {
  padding-bottom: 30px;
}
::v-deep .is-open + .uni-collapse-item__wrap {
  height: auto !important;
}

.code_item {
  border-bottom: 1px solid #ddd;
  font-size: 26rpx;
  background-color: #fff;
  .mouth_item,
  .day_title {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
  }
  .mouth {
    border: 1px solid #eee;
  }
  .mouth_item {
    background: #27ba9b;
    color: #fff;
  }
  .day_title {
    background-color: #d0f3eb;
  }
  .people_nav,
  .content_title,
  .content_item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin: 0 20px;
  }
  .people_nav {
    justify-content: space-around;
    padding: 0;
    .people_item {
      padding: 10px 15px;
      margin-top: 5px;
      border-radius: 10px 10px 0 0;
      box-shadow: 1px 0 2px #ddd;
    }
    .active {
      background-color: #eee;
    }
  }
  .content_item {
    border-top: 1px solid #eee;
    .business_name {
      width: 80px;
    }
    .business_code {
      width: 100px;
    }
    .business_time {
      width: 80px;
    }
    .handle {
      width: 25px;
    }
  }
}

.list .title {
  display: flex;
  justify-content: space-between;
  padding-right: 5px;
  align-items: center;
  padding-left: 15px;
  height: 40px;
  background-color: #27ba9b;
  text {
    font-weight: normal;
    color: #fff;
    font-size: 14px;
  }
  .timePicker {
    width: 70%;
  }
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
}
</style>
